// 登录注册功能

// 切换登录/注册
const loginBox = document.querySelector('.login')
const registerBox = document.querySelector('.register')
const loginA = document.querySelector('.login a')
const registerA = document.querySelector('.register a')

loginA.addEventListener('click', function () {
  loginBox.style.display = 'none'
  registerBox.style.display = 'block'
})
registerA.addEventListener('click', function () {
  loginBox.style.display = 'block'
  registerBox.style.display = 'none'
})

// 表单校验
const registerUser = document.querySelector('.register [name=username]')
const registerPwd = document.querySelector('.register [name=password]')
const loginUser = document.querySelector('.login [name=username]')
const logonPwd = document.querySelector('.login [name=password]')

verifyInput(registerUser, '用户名不能为空', /^\S{2,15}$/, '用户名长度不小于2位或超过15位')
verifyInput(registerPwd, '密码不能为空', /^\S{6,18}$/, '密码长度不小于6位或超过18位')
verifyInput(loginUser, '用户名不能为空', /^\S{2,15}$/, '用户名长度不小于2位或超过15位')
verifyInput(logonPwd, '密码不能为空', /^\S{6,18}$/, '密码长度不小于6位或超过18位')

/**
 * 校验用户名和密码
 * @param e 校验元素
 * @param txt1 提示文本
 * @param reg 校验正则
 * @param txt2 提示文本
 */
function verifyInput(e, txt1, reg, txt2) {
  e.addEventListener('input', function () {
    // 非空校验
    if (this.value.trim() === '') {
      this.nextElementSibling.style.display = 'block'
      this.nextElementSibling.innerHTML = txt1
      return
    } else {
      this.nextElementSibling.style.display = 'none'
    }
    // 长度校验
    if (reg.test(this.value.trim())) {
      this.nextElementSibling.style.display = 'none'
    } else {
      this.nextElementSibling.style.display = 'block'
      this.nextElementSibling.innerHTML = txt2
    }
  })
  
}

// 注册
// 获取注册表单，绑定提交事件
const registerForm = document.querySelector('.register form')
registerForm.addEventListener('submit', function (e) {
  // 阻止默认行为，改为ajax提交
  e.preventDefault()
  // 发送axios请求
  axios({
    url: '/api/register',
    method: 'post',
    data: `username=${ registerUser.value }&password=${ registerPwd.value }`
  }).then(({ data: res }) => {
    // 注册成功，触发a链接点击事件，清空表单，返回登录
    if (res.code === 0) {
     alert('用户注册成功')
      registerForm.reset()
      registerA.click()
    }
  })
})

// 登录
// 获取登录表单，绑定提交事件
const loginForm = document.querySelector('.login form')
loginForm.addEventListener('submit', function (e) {
  e.preventDefault()
  axios({
    url: '/api/login',
    method: 'POST',
    data: {
      username: loginUser.value,
      password: logonPwd.value
    }
  }).then(({ data: res }) => {
    // 登录成功，弹出提示信息，跳转到首页
    if (res.code === 0) {
      alert('登录成功')
      // 延迟1秒挑战，避免提示不可见
      setTimeout(() => {
        // 相对于login.html而言
        location.href = './index.html'
      }, 1000)
      // 保存登录信息到token
      localStorage.setItem('myToken', res.token)
    }
  })
})